<template>
    <f7-card >
        <template v-if="tepType=='line_effective'">
            <f7-card-header>
                <img :src='data.truck_logo?data.truck_logo:0' class="infor-face" @error="imgError" data-type="truck_logo">
                <div class="text-center_article">{{data.truck_num}}</div>
                <div class="text-center_weight"> 载重{{data.truck_weight}}吨</div>
                <div class="text-right">
                    <span>{{data.user_name}}</span>
                    <img :src='data.user_photo?data.user_photo:0' class="label-v" @error="imgError" data-type="infor_faces">
                </div>
            </f7-card-header>
            <f7-card-header>
                <div class="text-left">
                    <img src='../assets/img/line-icon.png'  class="line-icon" />
                    <div class="pull-left">
                        <b>{{data.start_province}}</b>
                        <span>
                            <template v-if="data.start_city&&data.start_city.length==1">{{data.start_city[0]}}</template>
                            <template v-if="data.start_city&&data.start_city.length>1">{{data.start_city.length}}个市</template>
                        </span>
                        <span>
                            <template v-if="data.start_district&&data.start_district.length==1">{{data.start_district[0]}}</template>
                            <template v-if="data.start_district&&data.start_district.length>1">{{data.start_district.length}}个区</template>
                        </span>
                    </div>
                </div>
                <div class="text-center">
                    <h5 class="text-orange" v-if="data.money">去：￥{{data.money}}元/吨</h5>
                    <h5 class="text-orange" v-if="!data.money">以我方出价为准</h5>
                    <h5 class="status-bg text-orange" v-if="data.unmoney">回：￥{{data.unmoney}}元/吨</h5>
                    <h5 class="status-bg text-orange" v-if="!data.unmoney">以我方出价为准</h5>
                </div>
                <div class="text-right">
                    <div class="pull-right">
                        <b>{{data.end_province}}</b>
                        <span>
                            <template v-if="data.end_city&&data.end_city.length==1">{{data.end_city[0]}}</template>
                            <template v-if="data.end_city&&data.end_city.length>1">{{data.end_city.length}}个市</template>
                        </span>
                        <span>
                            <template v-if="data.end_district&&data.end_district.length==1">{{data.end_district[0]}}</template>
                            <template v-if="data.end_district&&data.end_district.length>1">{{data.end_district.length}}个区</template>
                        </span>
                    </div>
                </div>
            </f7-card-header>
        </template>
        <template v-if="tepType!='line_effective'">
            <f7-card-header>
                <div class="text-left">
                    <img src='../assets/img/pass-icon3.png' class="line-icon" />
                    <div class="pull-left">
                        <b>{{data.send_province}}</b>
                        <span>
                            <template v-if="data.send_city&&data.send_city.length==1">{{data.send_city[0]}}</template>
                            <template v-if="data.send_city&&data.send_city.length>1">{{data.send_city.length}}个市</template>
                        </span>
                        <span>
                            <template v-if="data.send_district&&data.send_district.length==1">{{data.send_district[0]}}</template>
                            <template v-if="data.send_district&&data.send_district.length>1">{{data.send_district.length}}个区</template>
                        </span>
                    </div>
                </div>
                <div class="text-center">
                    <h5 class="text-orange" >{{data.amount}}吨 {{data.category_penult_chn}}</h5>
                    <h5 class="status-bg text-orange">￥{{data.price}}元/吨</h5>
                </div>
                <div class="text-right">
                    <div class="pull-right">
                        <b>{{data.receive_province}}</b>
                        <span>
                            <template v-if="data.receive_city&&data.receive_city.length==1">{{data.receive_city[0]}}</template>
                            <template v-if="data.receive_city&&data.receive_city.length>1">{{data.receive_city.length}}个市</template>
                        </span>
                        <span>
                            <template v-if="data.receive_district&&data.receive_district.length==1">{{data.receive_district[0]}}</template>
                            <template v-if="data.receive_district&&data.receive_district.length>1">{{data.receive_district.length}}个区</template>
                        </span>
                    </div>
                </div>
            </f7-card-header>
        </template>

    </f7-card>
</template>

<script>
import daoJs from './daoJs.vue'
export default {
  name: 'passList',
  props: ['data', 'tepType'],
  components: {daoJs},
  data () {
    return {

    }
  },
  methods: {

  }

}
</script>

<style scoped>
    .ios .Time {
        background: #f5f5f5 !important;
        color: #666 !important;
    }
    .ios .page {
        background: #f5f5f5;
    }
    .ios a {
        color: #333;
        display: inline-block;
        width: 100%;
    }
    .ios .block {
        margin: 0;
        color: #6d6d72;
        text-align: center;
        background: #fff;
        height: 44px;
        line-height: 44px;
        color: #333;
        font-size: 12px;
        font-weight: normal;
    }

    .row-scroll {
        overflow: hidden;
        min-width: 700px;
        padding: 10px 10px 3px 10px;
        overflow-x: hidden;
        margin: 0;
    }

    .row-scroll li {
        float: left;
        text-align: center;
        list-style: none;
        padding-right: 10px;
    }
    .row_ul li{
        margin-right: 20px;
    }
    .row-scroll li span {
        display:inline-block;
        background: #f4f4f4;
        border: 1px solid #ccc;
        margin-bottom: 12px;
        color: #999;
        line-height: 44px;
    }
    .row-scroll li a{
        background: #f0f0f0;
        padding: 5px 10px;
        border-radius: 20px;
        color: #999;
    }
    .row-scroll li .actived {
        color: #fff;
        background-image: linear-gradient(90deg, #94a8fb 0%, #6a82e8 100%);
    }
    .img-size1 {
        width: 48px;
        height: 48px;
        box-sizing: border-box;
    }
    .img-circle {
        border-radius: 100%;
        background: #f0f0f0;
    }
    .img-circle img{
        border-radius: 100%;
    }
    .row-scroll span i.h6 {
        margin-top: 10px;
        display: inline-block;
        line-height: 15px;
        width: 25px;
        color: #999;
        font-size: 11px;
        font-style: normal;
    }
    .row-scroll h6 {
        width: 65px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        margin-bottom: 3px;
        font-weight: initial;
        margin: 0;
        color: #999;
    }
    .text-gray {
        color: #999 !important;
        display: inline !important;
    }
    .active span {
        border-color: #ff8645 !important;
        color: #ff8645 !important;
        background: #fff2e8 !important;
    }
    .active h6 {
        color: #ff8645 !important;
        font-size: 11px;
        font-weight: initial;
    }
    .lightbulb {
        font-size: 20px;
    }

    .nav_title {
        margin: 10px 10px 0px 10px !important;
        border-radius: 6px;
        padding: 8px 0;
        background: #ffffff;
        padding-left: 15px;
        text-align: left !important;
    }
    .ios .icon.The_horn {
        color: #9898e7;
        font-size: 20px;
        margin-right: 10px;
    }
    .nav_title b {
        color: #9898e7;
        font-size: 12px;
    }
    .ios .icon.color-gray {
        color: #8e8e93;
        font-size: 20px;
        float: right;
        margin-right: 10px;
    }
    .ios .block-title {
        color: #333;
        margin: 0;
        line-height: 20px;
        padding-top: 10px;
    }
    .text-purple {
        color: #a2a2f0;
        margin-left: 3px;
        font-size: 12px;
    }
    .icon-filter {
        width: 11px;
        height: 11px;
    }
    .col {
        margin-top: 70px;
    }
    .gap-100 {
        margin-top: 100px;
    }
    .clearfix {
        clear: both;
    }
    .text-grag {
        color: #999 !important;
        font-size: 14px;
    }

    <!--卡片css-- >
        .text-left {
            position: relative;
        }
    .line-icon {
        position: absolute;
        left: 16px;
        width: 16px;
        height: 45px;
    }
    .status-bg {
        background: url('../assets/img/route-bg.png') no-repeat top center;
        background-size: 95px 4px;
        margin-top: 6px;
        padding-top: 10px;
        width: 97px;
    }
    .text-orange {
        margin: 0;
        color: #ff6c00;
        font-weight: normal !important;
        font-size: 13px;
        text-align: center;
    }
    .pull-left {
        text-align: left;
        margin-left: 24px;
    }
    .pull-right {
        text-align: right;
    }
    .pull-left span {
        font-size: 12px;
        color: #666;
        display: block;
           margin-left:0 !important;
    }
    .pull-left b {
        font-size: 14px;
        color: #000;
        display: block;
    }
    .pull-right span {
        font-size: 12px;
        color: #666;
        display: block;
    }
    .pull-right b {
        font-size: 14px;
        color: #000;
        display: block;
    }
    .infor-face {
        max-width: 38px;
        max-height: 38px;
        width: 100%;
        height: 100%;
    }
    .text-center_article {
        position: absolute;
        font-size: 14px;
        color: #A2A2F0;
        padding-left: 50px;
        top:15px;
    }
    .text-center_weight{
        font-size: 12px;
        position: absolute;
        padding-left: 50px;
        color: #999;
        top:37px;
    }
    .label-v {
        width: 24px;
        height: 24px;
        vertical-align: text-bottom;
        vertical-align: middle;
        border-radius: 100%;
        background: #f0f0f0;
    }
    .text-right {
        text-align: center;
    }
    .text-right span {
        margin: 0 0 3px 0;
        font-size: 10px;
        color: #666;
        display: inherit;
    }
    .ios .card-header {
        padding: 5px 15px 5px 15px;
        position: static;
    }
    .ios .navbar a.icon-only{
        width: 20px;
    }
.card {
    padding: 10px 0px;
}
</style>
